import React, { useEffect, useState, useMemo, ChangeEvent } from 'react'
import { Col, Row, Layout, Select } from 'antd';
import style from './Camera.module.css'
import * as XLSX from 'xlsx';
import { useDispatch, useSelector } from 'react-redux';
import { setList1 } from '../../redux/slices/allDataSlice';
import type { RootState } from '../../redux/store'
import MonthLine from '../../component/MonthLine';
import CityBar from '../../component/CityBar';
import Ranking from '../../component/Ranking';
import Proportion from '../../component/Proportion';
import { getCameraItemDeduct } from '../../lib/publicMethod';
import CameraProportionChange from '../../component/CameraProportionChange';
import BreachType from '../../component/BreachType';
import TeacherLine from '../../component/TeacherLine';
import { ICameraData } from '../../interface/ICameraData';

const { Header, Content } = Layout
interface ITeaToList {
  [key: string]: ICameraData[]
}
interface ICityItem {
  value: number,
  label: string
}

export default function Camera() {
  const [data, setData] = useState([])
  const dispatch = useDispatch()
  const allDataList = useSelector((state: RootState) => state.allData.list1)
  const [cityList, setCityList] = useState<ICityItem[]>([])
  function fileChange(e: ChangeEvent<HTMLInputElement>) {
    const fileReader = new FileReader()
    fileReader.readAsArrayBuffer((e.target.files as FileList)[0])
    fileReader.addEventListener('load', function (ev) {
      const workBook = XLSX.read(ev.target?.result, {
        type: 'binary'
      })
      const wsname = workBook.SheetNames[0]
      const sheetJson = XLSX.utils.sheet_to_json(workBook.Sheets[wsname])
      dispatch(setList1(sheetJson as []))
    })
  }
  function selectChange(value: number, cityItem: ICityItem | ICityItem[]) {
    if (value === 0) {
      setData(allDataList)
    } else {
      setData(allDataList.filter(((item: ICameraData) => {
        return item['校区'].includes((cityItem as ICityItem).label)
      })))
    }
  }
  const teaToList = useMemo(() => {
    const list: ITeaToList = {}
    for (let i = 0; i < data.length; i++) {
      if (list[data[i]['姓名']]) {
        list[data[i]['姓名']].push(data[i])
      } else {
        list[data[i]['姓名']] = [data[i]]
      }
    }
    return list
  }, [data])
  useEffect(() => {
    const citys: string[] = []
    allDataList.forEach((item: ICameraData) => {
      citys.push(item['校区'])
    })
    const citySet = Array.from(new Set(citys))
    const cityOption: ICityItem[] = []
    citySet.forEach((item, index) => {
      cityOption.push({ value: Number(index) + 1, label: item })
    })
    setData(allDataList)
    setCityList(cityOption)
  }, [allDataList])

  return (
    <>
      <Header className={style.header}>
        <input type="file" onChange={fileChange} />
        <Select
          defaultValue={0}
          style={{ width: 120 }}
          onChange={selectChange}
          options={[{ value: 0, label: '全国' }, ...cityList]}
        />
      </Header>
      <div className={style.contentBox}>
        <Content className={style.content}>
          <Row>
            <Col span={12}>
              <MonthLine data={data} min={50}></MonthLine>
            </Col>
            <Col span={12}>
              <CityBar data={data}></CityBar>
            </Col>
          </Row>
          <Row>
            <Ranking data={data}></Ranking>
          </Row>
          <Row>
            <Col span={12}>
              <Proportion deductSum={getCameraItemDeduct(data).sum}></Proportion>
            </Col>
            <Col span={12}>
              <CameraProportionChange data={data}></CameraProportionChange>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <BreachType data={data}></BreachType>
            </Col>
            <Col span={12}></Col>
          </Row>
          <Row>
            <Col span={24}>
              <TeacherLine data={data} teaToList={teaToList} min={-50}></TeacherLine>
            </Col>
          </Row>
        </Content>
      </div>
    </>
  )
}
